@import url(./reset.css);

@font-face {
  font-family: 'icomoon';
  src: url('../fonts/icomoon.eot?ca4j0p');
  src: url('../fonts/icomoon.eot?ca4j0p#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?ca4j0p') format('truetype'),
    url('../fonts/icomoon.woff?ca4j0p') format('woff'),
    url('../fonts/icomoon.svg?ca4j0p#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

html,
body {
  background-color: rgb(243, 243, 243);
  font-size: calc(100vw / 7.5);
  --header-height: 0.9rem;
  --footbar-height: 1rem;
}

@media screen and (min-width: 750px) {
  html {
    font-size: 100px;
  }
}

body {
  font-size: 14px;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .1);
  border-radius: 2px;
}

.app {
  display: flex;
  flex-direction: column;
  max-width: 750px;
  min-width: 320px;
  margin-left: auto;
  margin-right: auto;
  height: 100vh;
}

.app .header,
.app .footbar {
  flex-shrink: 0;
  background-color: #fff;
}

.app .header {
  font-size: 0.3rem;
  height: var(--header-height);
  padding-left: 0.3rem;
}

.app .header span {
  vertical-align: top;
  line-height: var(--header-height);
}

.app .header a {
  display: none;
  font-size: 0.36rem;
  line-height: var(--header-height);
  vertical-align: top;
  font-family: "icomoon";
  margin-right: 0.24rem;
}

/* ------------------------------主体----------------------------- */
.app .main {
  overflow: auto;
  flex-grow: 1;
  background-color: #f7f7f7;
}

/* ---------------------首页-------------------- */
.main .home .swiper-container {
  width: 7.5rem;
}

.home .swiper-container .swiper-slide img {
  display: block;
  max-width: 100%;
  height: auto;
}

.home .swiper-container .swiper-pagination {
  padding-right: 0.46rem;
  position: absolute;
  display: flex;
  justify-content: flex-end;
  z-index: 99;
  bottom: 0.44rem;
}

.home .swiper-container .swiper-pagination-bullet {
  width: 0.12rem;
  height: 0.12rem;
  margin: 0.04rem;
  border-radius: 0.06rem;
  background-color: #f7fbff;
  opacity: 1;
  outline: none;
}

.home .swiper-container .swiper-pagination-bullet-active {
  width: 0.31rem;
}

.main .home .adv {
  padding: 0.13rem 0;
  background-color: #fff;
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 0.18rem;
}

.main .home .adv>div i {
  font-size: 0.28rem;
  font-family: "icomoon";
  margin-right: 0.12rem;
  vertical-align: middle;
  color: #999;
}

.main .home .adv>div span {
  vertical-align: middle;
  font-size: 0.18rem;
  color: #404040;
}

/* 团购 */
.home .shopping .shop {
  background-color: #fff;
  margin-bottom: 0.18rem;
}

.home .shopping .shop h2 {
  padding: 0.28rem 0;
  font-size: 0.22rem;
  text-align: center;
  font-weight: 400;
  color: #7f7f7f;
  line-height: 0.32rem;
}

.home .shopping .shop h2 span {
  margin: 0 0.15rem;
  font-size: 0.32rem;
  vertical-align: -0.03rem;
  color: #020202;
}

.home .shopping .shop ul {
  padding: 0.2rem 0.32rem 0.42rem;
  white-space: nowrap;
  font-size: 0;
}

.home .shopping .shop ul>div {
  overflow-x: auto;
}

.home .shopping .shop ul a {
  display: inline-block;
  width: 2.8rem;
  margin-left: 0.08rem;
}

.home .shopping .shop ul a img {
  display: block;
  max-width: 100%;
  height: auto;
}

.home .shopping .shop ul a h4 {
  padding: 0.15rem;
  font-size: 0.24rem;
  font-weight: normal;
  color: #020202;
}

.home .shopping .shop ul a .detail {
  padding: 0 0.15rem;
  font-size: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #626262;
  line-height: 0.2rem;
}

.home .shopping .shop ul a .price {
  text-align: center;
  font-size: 0.2rem;
  padding: 0.22rem;
  color: #000000;
}

.home .shopping .shop ul a .price span:first-child {
  color: #f00003;
  font-size: 0.14rem;
  margin-left: -0.08rem;
}

.home .shopping .shop ul a .price span:last-child {
  color: #f00003;
  font-size: 0.22rem;
  margin-left: -0.03rem;
}

.home .shopping .shop ul a .del {
  text-align: center;
  color: #d0d0d0;
  font-size: 0.15rem;
}

.home .shopping .shop .more {
  display: flex;
  border-top: 0.01rem solid #e4e4e4;
  justify-content: center;
  align-items: center;
  height: 1.03rem;
  font-size: 0.26rem;
  color: #a0a0a0;
}

.home .shopping .shop .more::after {
  font-family: "icomoon";
  content: "\f00a";
  margin-left: 0.08rem;
}

/* 手机 */
.home .shopping .shop>.phones {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.home .shopping .shop>.phones .phone {
  text-align: center;
  width: 2.9rem;
  margin-top: 0.57rem;
  margin-bottom: 1rem;
}

.home .shopping .shop>.phones .phone a {
  display: block;
  padding: 0 0.41rem;
}

.home .shopping .shop>.phones .phone a img {
  display: block;
  max-width: 100%;
  height: auto;
}

.home .shopping .shop>.phones .phone h4 {
  margin-top: 0.38rem;
  margin-bottom: 0.08rem;
  font-size: 0.28rem;
}

.home .shopping .shop>.phones .phone .detail {
  font-size: 0.24rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #585858;
}

.home .shopping .shop>.phones .phone .price {
  font-size: 0.24rem;
  margin-top: 10px;
  color: #f81301;
}

.home .shopping .shop>.phones .phone .price span {
  font-size: 0.18rem;
  margin-right: -0.03rem;
}

/* 配件 */
.home .shopping .shop>.pasts {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.home .shopping .shop>.pasts>.past {
  text-align: center;
  width: 2.76rem;
  margin-top: 0.47rem;
  margin-bottom: 0.83rem;
}

.home .shopping .shop>.pasts>.past a img {
  display: block;
  max-width: 100%;
  height: auto;
}

.home .shopping .shop>.pasts>.past h4 {
  margin-top: 0.28rem;
  margin-bottom: 0.08rem;
  font-size: 0.28rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home .shopping .shop>.pasts>.past .detail {
  font-size: 0.24rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #585858;
}

.home .shopping .shop>.pasts>.past .price {
  font-size: 0.24rem;
  margin-top: 10px;
  color: #f81301;
}

.home .shopping .shop>.pasts>.past .price span {
  font-size: 0.18rem;
  margin-right: -0.03rem;
}

/* ---------------------首页-------------------- */

/* ---------------------分类-------------------- */
.main .classify {
  display: flex;
  height: calc(100vh - var(--header-height) - var(--footbar-height));
  background-color: #fff;
}

.main .classify .left {
  overflow-y: auto;
  flex-shrink: 0;
  width: 1.64rem;

  border-right: 0.01rem solid #e6e6e6;
}

.main .classify .left li {
  padding: 0.43rem 0;
  user-select: none;
}

.main .classify .left li a {
  display: block;
  text-align: center;
  font-size: 0.26rem;
  border-left: 0.04rem solid transparent;
}

.main .classify .left li.active a {
  color: #f10313;
  border-color: #f10313;
}

.main .classify .right {
  position: relative;
  overflow-y: auto;
  flex-grow: 1;
  padding: 0 0.25rem;
}

.main .classify .right .category {
  text-align: center;
}

.main .classify .right .category>a {
  display: block;
  padding-top: 0.33rem;
  padding-bottom: 0.33rem;
}

.main .classify .right .category>a img {
  display: block;
  max-width: 100%;
  height: auto;
}

.main .classify .right .category>.title {
  padding: 0.06rem 0;
  display: flex;
  font-size: 0.24rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.3rem;
}

.main .classify .right .category>.title::after,
.main .classify .right .category>.title::before {
  content: "";
  margin: 0 0.25rem;
  width: 0.37rem;
  height: 0.02rem;
  background-color: #ddd;
}

.classify .right .category .pruducts {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.classify .right .category .pruducts a {
  width: 50%;
  padding: 0 0.14rem;
  margin: 0.33rem 0;
  flex-shrink: 0;
  position: relative;
}

.classify .right .category .pruducts a .hotsort,
.classify .right .category .pruducts a .recommend {
  position: absolute;
  top: -0.52rem;
  right: 0.08rem;
  text-align: center;
  color: #fff;
  width: 0.5rem;
  line-height: 0.5rem;
  border-radius: 50% 50% 50% 0;
  font-size: 0.18rem;
}

.classify .right .category .pruducts a .hotsort {
  box-shadow: 0 0.02rem 0.06rem 0.005rem #ffad55ef;
  background-image: linear-gradient(to right top, #ff8040, #ffad55);
}

.classify .right .category .pruducts a .recommend {
  box-shadow: 0 0.02rem 0.06rem 0.01rem #ff5581ef;
  background-image: linear-gradient(to right top, #ff3f43, #ff5581);
}

.classify .right .category .pruducts a img {
  max-width: 50%;
  height: auto;
}

.classify .right .category .pruducts a .title {
  margin-top: 0.46rem;
  font-size: 0.22rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.classify .right .category .pruducts a .detial {
  font-size: 0.18rem;
  color: #8f8f8f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.05rem 0 0.15rem;
}

.classify .right .category .pruducts a .price {
  font-size: 0.20rem;
}

/* ---------------------分类-------------------- */

/* -------------------商品详情------------------ */
.main .prodetail {
  padding-left: 0.29rem;
  padding-right: 0.38rem;
  background-color: #fff;
}

.main .prodetail .swiper-container {
  padding-top: 0.22rem;
  width: 6.84rem;

}

.prodetail .swiper-container .swiper-slide img {
  display: block;
  max-width: 100%;
  height: auto;
}

.prodetail h4 {
  padding: 0.26rem 0;
  font-size: 0.34rem;
}

.prodetail .detail {
  font-size: 0.26rem;
  color: #1d1d1d;
}

.prodetail .price {
  padding: 0.35rem 0;
  font-size: 0.36rem;
  color: #ff0000;
}

.prodetail .number {
  display: flex;
  font-size: 0.26rem;
  align-items: center;
}

.prodetail .number button,
.prodetail .number input {
  width: 0.54rem;
  font-size: 0.22rem;
  line-height: 0.54rem;
  text-align: center;
  background-color: #f2f3f5;
  vertical-align: top
  ;
}

.prodetail .number button:nth-of-type(1) {
  font-family: "icomoon";
  border-radius: 0.08rem 0 0 0.08rem;
}

.prodetail .number button:nth-of-type(2){
  font-family: "icomoon";
  border-radius: 0 0.08rem 0.08rem 0;
} 

.prodetail .number button[disabled] {
  cursor: not-allowed;
  opacity: .5;
}

.prodetail>a {
  font-size: 0.26rem;
  margin-top: 0.3rem;
  line-height: 1.06rem;
  border-top: 0.02rem solid #efefef;
  border-bottom: 0.01rem solid #eeeff2;
  display: block;
}
.prodetail>a:active {
  background-color: rgb(245, 245, 245);
}

.prodetail>a span {
  font-size: 0.36rem;
  vertical-align: -0.1rem;
  padding: 0 0.1rem;
  font-family: "icomoon";
}

.prodetail>a i {
  float: right;
  font-size: 0.36rem;
  font-family: "icomoon";
}
.prodetail .popup {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.5rem;
  width: 7.5rem;
  height: 5rem;
  background-color: #fff;
  position: fixed;
  margin-left: -0.29rem;
  bottom: -100vh;
  z-index: 20;
}
.prodetail .mask {
  display: none;
  position: fixed;
  top: 0;
  margin-left: -0.29rem;
  width: 7.5rem;
  height: 100%;
  z-index: 10;
  cursor: pointer;
  background-color: rgb(0, 0, 0,.2);
}

.prodetail>.option {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 0.83rem;
  border-bottom: 0.01rem solid #eeeff2;
}

.prodetail>.option a {
  position: relative;
  z-index: 5;
  margin-bottom: -0.01rem;
  font-size: 0.26rem;
  line-height: 0.83rem;
  padding: 0 0.36rem;
  user-select: none;
  border-bottom: 0.06rem solid transparent;
}

.prodetail>.option a.active {
  border-color: #ec000d;
}

.prodetail .content {
  margin-bottom: 0.1rem;
}

.prodetail .content>div {
  display: none;
}

.prodetail .content>div.active {
  display: block;
}

.prodetail .content img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* -------------------商品详情------------------ */

/* -------------------支付页面------------------ */
.main .payment {
  padding-bottom: 0.97rem;
}
.main .payment .receiving-address {
  margin: 0.03rem 0 0.2rem;
  background-color: #fff;
  height: 1.78rem;
  padding: 0.06rem 0.7rem;
  /* 图片边框 */
  border-bottom: 0.05rem solid transparent;
  -moz-border-image: url(../images/line.png) 30 30 stretch;
  -webkit-border-image: url(../images/line.png)30 30 stretch;
  -o-border-image: url(../images/line.png) 30 30 stretch;
  border-image: url(../images/line.png) 30 30 stretch;
}
.payment .receiving-address p {
  display: flex;
  justify-content: space-between;
  font-size: 0.26rem;
  padding: 0.1rem 0;
}
.payment .model1 {
  background-color: #fff;
  margin-bottom: 0.2rem;
}
.payment .model1>p {
  padding-left: 0.41rem;
  line-height: 0.82rem;
  font-size: 0.26rem;
  border-bottom: 0.02rem solid #cecece;
}
.payment .good-list>.good {
  padding: 0.23rem 0;
  display: flex;
  background-color: #fafafa;
}
.payment .good-list>.good img {
  max-width: 1.89rem;
  height: auto;
}
.payment .good-list>.good>div {
  padding: 0 0.2rem;
  width: 5.53rem;
}
.payment .good-list>.good h4 {
  font-size: 0.22rem;
}
.payment .good-list>.good h4 span {
  font-weight: 400;
}
.payment .good-list>.good>div p {
  display: flex;
  padding: 0.06rem 0;
  justify-content: space-between;
}
.payment .good-list>.good>div p .price {
  font-size: 0.2rem;
  color: #ed0012;
}
.payment .good-list>.good>div p .num {
  font-size: 0.2rem;
  color: #000; 
}
.payment .invoice>div {
  padding: 0.2rem  0.3rem;
  font-size: 0.26rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.payment .invoice>div span {
  color: #ea0000;
}
.payment .invoice>div input {
  flex-grow: 1;
  margin-left: 0.66rem;
  padding:0.05rem 0.08rem;
  border: 0.02rem solid #bebebe;
  border-radius: 0.04rem;
  color: #a4a5a7;
}
.payment .paymethod>div {
  padding: 0.66rem  0.3rem 0.56rem 0.45rem;
  font-size: 0.26rem;
  display: flex;
  flex-direction: column;
}
.payment .paymethod>div p a {
  padding: 0.09rem 0.55rem;
  color: #ea0000;
  border: 0.02rem solid #e90000;
}
.payment .paymethod>div p a:nth-child(1){
  border-radius: 0.04rem 0 0 0.04rem;
}
.payment .paymethod>div p a:nth-child(2){
  border-left: none;
  border-right: none;
}
.payment .paymethod>div p a:nth-child(3){
  border-radius:0 0.04rem 0.04rem 0;
}
.payment .paymethod>div p a.active {
  background-color: #ee0a24;
  color: #fff;
}

.payment .paymethod>div span {
  display: none;
  margin-top: 0.35rem;
  margin-bottom: 0.35rem;
}
.payment .paymethod>div span.active {
  display: block;
}
.payment .paymethod>div input {
  flex-grow: 1;
  margin-left: 0.66rem;
  padding:0.05rem 0.08rem;
  border: 0.02rem solid #bebebe;
  border-radius: 0.04rem;
  color: #a4a5a7;
}
.payment .message {
  margin-bottom: 0;
  border-bottom: 0.02rem solid #cecece;
}
.payment .message>div {
  padding-top: 0.19rem;
  padding-bottom: 0.1rem;
  padding-left: 0.42rem;
}
.payment .message>div textarea {
  width: 6.55rem;
  height: 1.15rem;
  border: 0.02rem solid #bebebe;
  border-radius: 0.04rem;
  color: #a0a0a2;
  padding: 0.1rem;
  font-size: 0.24rem;
  outline: none;
  resize: none;
}
.payment .message>div .cost {
  display: flex;
  flex-direction: column;
  margin-top: 0.17rem;
  border-top: 1px solid #f2f3f5;
  height: 1.66rem;
  padding-top: 0.12rem;
}
.payment .message>div .cost span {
  font-size: 0.24rem;
  color: #a0a0a2; 
}
.payment .submit-order {
  position: fixed;
  display: flex;
  bottom: 0;
  background-color: #fff;
  height: 0.97rem;
  width: 7.5rem;
  justify-content: space-between;
}
.payment .submit-order p {
  padding-left: 0.2rem;
  font-size: 0.3rem;
  align-self: center;
}
.payment .submit-order p span {
  font-size: 0.24rem;
  color: #ee0b26;
  margin-left: -0.14rem;
}
.payment .submit-order p span i {
  font-size: 0.28rem;
}
.payment .submit-order button {
  color: #fff;
  font-size: 0.3rem;
  height: 0.95rem;
  padding: 0.27rem 0.45rem;
  background-color: #ee0a24;
  border: none;
}
/* -------------------支付页面------------------ */

/* ---------------------我的-------------------- */
/* 上部 */
.main .mine .top {
  margin-bottom: 0.22rem;
  background-image: linear-gradient(to bottom, #ffeded, #fdfafa, #fff);
}

.main .mine .top .personal {
  padding: 0.61rem 0.29rem 0.5rem;
}

.mine .top .personal img {
  float: left;
  width: 1.29rem;
  border-radius: 50%;
  height: auto;
  vertical-align: middle;
}

.mine .top .personal>div {
  padding: 0.12rem 0.24rem;
  float: left;
}

.mine .top .personal>div .name {
  padding: 0.05rem 0;
  font-size: 0.4rem;
}

.mine .top .personal>div .tel {
  padding: 0.05rem 0;
  font-size: 0.2rem;
  color: #909292;
}

.mine .top .personal a {
  display: flex;
  align-items: center;
  margin: 0.47rem 0;
  float: right;
  font-size: 0.26rem;
  color: #898a8a;
}

.mine .top .personal a span {
  font-family: "icomoon";
  margin: 0 0.05rem;
}

.mine .top .order {
  padding: 0 0.32rem;
}

.mine .top .order .myorder {
  display: flex;
  justify-content: space-between;
}

.mine .top .order .myorder span:first-child {
  font-size: 0.34rem;
}

.mine .top .order .myorder span:last-child {
  display: flex;
  align-items: center;
  font-size: 0.26rem;
  color: #898a8a;
}

.mine .top .order .myorder span:last-child i {
  font-family: "icomoon";
  margin: 0 0.05rem;
}

.mine .top .order .orderitem {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 1.65rem;
  margin-top: 0.18rem;
}

.mine .top .order .orderitem>a {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0.36rem 0;
}

.mine .top .order .orderitem>a i {
  font-family: "icomoon";
  font-size: 0.60rem;
  background: linear-gradient(to bottom, #f7325a, #ec0520);
  -webkit-background-clip: text;
  color: transparent;
}

.mine .top .order .orderitem>a span {
  font-size: 0.24rem;
  margin-top: 0.12rem;
}

/* 下部 */
.mine .bottom {
  padding: 0 0.2rem;
  background-color: #fff;
}

.mine .bottom a {
  position: relative;
  display: block;
  font-size: 0.28rem;
  line-height: 1.24rem;
  border-bottom: 0.02rem solid #f3f3f3;
}
.mine .bottom a:active {
  background-color: rgb(245, 245, 245);
}

.mine .bottom a span {
  font-family: "icomoon";
  margin: 0 0.26rem;
  font-size: 0.4rem;
  line-height: 1;
  color: #464545;
  vertical-align: middle;
}

.mine .bottom a::after {
  position: absolute;
  right: 0.1rem;
  color: #cecece;
  font-family: "icomoon";
  content: "\f00a";
}

/* ---------------------我的-------------------- */

/* -----------------------------底部导航--------------------------- */
.app .footbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: var(--footbar-height);
}

.app .footbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  flex-shrink: 0;
}

.app .footbar a.buy {
  display: none;
  width: 6.1rem;
  margin: 0 0.18rem;
  text-align: center;
  line-height: 0.84rem;
  font-size: 0.28rem;
  background-image: linear-gradient(to right, #e61423, #ff0c53);
  color: #ccc;
  border-radius: 0.41rem;
}

.app .footbar a i {
  font-family: "icomoon";
  font-size: 0.42rem;
  font-weight: 700;
  color: #585858;
}

.app .footbar a:nth-child(1) i::after {
  content: "\f0db";
}

.app .footbar a:nth-child(2) i::after {
  content: "\f006";
}

.app .footbar a:nth-child(3) i::after {
  content: "\f080";
}

.app .footbar a:nth-child(1).active i::after {
  color: #ea122a;
  content: "\f0dc";
}

.app .footbar a:nth-child(2).active i::after {
  color: #ea122a;
  content: "\e901";
}

.app .footbar a:nth-child(3).active i::after {
  color: #ea122a;
  content: "\f081";
}

.app .footbar a span {
  color: #8d8d8d;
  font-size: 0.21rem;
}

.app .footbar a.active span {
  color: #0b0b0b;
}

/* -------------底部导航-------------- */